import React, { Component } from 'react'

import {
  HashRouter as Router,
  NavLink,
  Route,
  Redirect
} from 'react-router-dom'

import './common.css'

class Home extends Component {
  constructor(props) {
    super(props)
    console.log('---home组件构建---')
  }
  render() {
    return <h1>Home组件</h1>
  }
}

class User extends Component {
  constructor(props){
    super(props)
    console.log('---User props:', props)
  }
  render() {
    return <h1>User组件</h1>
  }
}

class About extends Component {
  render() {
    console.log('---About组件渲染---')
    return <h1>About组件</h1>
  }
}

const PageLost = ()=> {
  return <h1>404</h1>
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <NavLink activeClassName='active' exact to='/'>首页</NavLink>
          <NavLink activeClassName='active' exact to='/user'>我的</NavLink>
          <NavLink activeClassName='active' exact to='/about'>关于</NavLink>
          <Route exact path='/' component={Home}></Route>
          <Route exact path='/user' render={(props)=><User {...props}></User>}></Route>
          <Route exact path='/about' children={()=><About></About>}></Route>
          <Route exact path='/404' component={PageLost}></Route>
          <Redirect to='/404'></Redirect>
        </Router>
      </div>
    )
  }
}
